<template>
  <div>
    <el-container>
      <el-header>
        <f-header></f-header>
      </el-header>
      <el-container>
        <el-aside :width="$store.state.asideWidth">
          <f-menu></f-menu>
        </el-aside>
        <el-main>
          <f-tag-list></f-tag-list>
          <!-- router-view会根据当前路由自动加载对应组件 -->
          <router-view v-slot="{Component}">
            <transition name="fade">
               <keep-alive :max="10">
                <component :is="Component"></component>
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import FHeader from './components/FHeader.vue'
import FMenu from './components/FMenu.vue'
import FTagList from './components/FTagList.vue'
</script>

<style>
.el-aside{
  transition: all 0.2s;
}

.fade-enter-from{
  opacity: 0; 
  -webkit-transform: translate3d(0,-100%,0);  
  transform:translate3d(0,-100%,0)
}

.fade-enter-to{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);  
  transform:translate3d(0,0,0)
}

.fade-leave-from{
  opacity: 1;
}

.fade-leave-to{
  opacity: 0;
  -webkit-transform: translate3d(0,100%,0);  
  transform:translate3d(0,100%,0)
}

.fade-enter-active,
.fade-leave-acvive{
  /* 进入和离开全部都有动画效果--持续0.3s */
  transition: all 0.3s;
}

/* 让进入的动画持续0.3s就可以让前面的先离开，后面的再进来 */
.fade-enter-active{
    transition-delay: 0.3s;
}

</style>